﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>todo</title>
    <link rel="stylesheet" href="style/pub/common.css"/>
    <link rel="stylesheet" href="style/undecorated/colResizer.css"/>
    <link rel="stylesheet" href="style/undecorated/popupMenu.css"/>

    <link rel="stylesheet" href="style/undecorated/dropdown.css"/>
    <link rel="stylesheet" href="style/undecorated/timePicker.css"/>
    <link rel="stylesheet" href="style/undecorated/datetimePicker.css"/>

    <link rel="stylesheet" href="style/undecorated/progressBar.css"/>

    <link rel="stylesheet" href="style/todolist.css"/>
    <link rel="stylesheet" href="style/todo.css"/>
    <link rel="stylesheet" href="style/theme/green-theme.css"/>
    <link rel="stylesheet" href="style/theme/chinese-theme.css"/>

    <style>
        span.label {
            font-size: 14.63px;
            line-height: 14.63px;
        }
        span.markers {
            display: inline-block;
            height: 16px;
        }

        span.markers>* {
            /*margin-top: 2px!important;*/
            float: left;
        }
        span.markers span.priority {
            display: inline-block;
            position: relative;
            height: 16px;
            overflow: visible;
            width: 28px;
            /*margin-top: 2px!important;*/
            /*position: ;*/
        }

        span.markers span.priority img {
            margin-top: 0!important;
            position:absolute;
            top: 2px;
        }

    </style>
    <style>

        #tblTodo th, #tblTodo td {
            font-family: consolas, 'Microsoft YaHei', simsun;
        }
        .node-content {
            min-height: 21px;
        }
        #tblTodo span.label {
            padding-top: 2px;
            padding-bottom: 1.5px;
        }

        #tblTodo td[data-col1] {

        }

        /**************/

        tbody.nodes td[data-col1] {
            /*position: relative;*/
        }

        #tblTodo.hideGridLine td {
            /*border-bottom: 0;*/
            /*border-left: 0;*/
            border-color: transparent;
        }

        #tblTodo.hideTreeLine div.indent {
            display: none;
        }

        #tblTodo.hideHeader thead * {
            /*display: none;*/
            /*visibility: collapse;*/
            padding: 0!important;
            border: 0!important;
            height: 0!important;
            overflow: hidden;
            line-height: 0;
        }

        /*tr:nth-child(even) {*/
            /*background-color: cyan;*/
        /*}*/

        tfoot.empty-indicator a {
            color: blue;
        }


        /**************/
        body {
            padding-top: 0;
            margin-top: 0;
            zoom: 100%;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
        }
        /*to avoid scroll on focus..*/

        /*#tblTodo tr:last-child td {*/
            /*border-bottom: 0;*/
        /*}*/

        #tblTodo caption {
            height: 8px;
            display: none;
            /*background-color: yellow;*/
        }


        table.hideDue td[data-due], table.hideDue th[data-due] {
            display: none;
        }

        table.hideProgress td[data-progress], table.hideProgress th[data-progress] {
            display: none;
        }

        table.hideDesc td[data-desc], table.hideDesc th[data-desc] {
            display: none;
        }

        table.hideChecked tr.checked {
            display: none;
        }

            /*dnd*/


        .dragImage {
            zIndex: 1000;
            position: absolute;
            opacity: 0.5;
        }
        .dragOverlay {
            zIndex: 1001;
            position: absolute;
            width: 20px;
            height: 15px;
            background: no-repeat left top;
            /*border: solid 1px red;*/
        }

        .dragOverlay.move {
            background-position: 1px top;
            background-image: url('image/drag_move.png');
        }
        .dragOverlay.copy {
            background-position: 1px top;
            background-image: url('image/drag_copy.png');
        }
        .dragOverlay.notAllowed {
            background-position: 2px top;
            background-image: url('image/drag_notAllowed.png');
        }

        /**/
        .dropIndicator {
            position: absolute;
            height: 2px;
            background-color: #000;
        }
        .dropIndicator div {
            position: absolute;
            width: 1px;
            background-color: #000;
        }
        .dropIndicator .line1 {
            height: 6px;
            left: 0;
            top: -2px;
        }
        .dropIndicator .line2 {
            height: 4px;
            left: 1px;
            top: -1px;
        }
        .dropIndicator .line3 {
            height: 4px;
            right: 1px;
            top: -1px;
        }
        .dropIndicator .line4 {
            height: 6px;
            right: 0;
            top: -2px;
        }

        tr.dropParent span.label {
            background-color: #d3d3d3!important;
        }

        /* toast */
        #divToast {
            /*border: solid 1px red;*/
            font-family: 'Simsun';
            border:1px solid #C0C0C0;
            border-radius: 5px;
            background-color: infobackground;
            padding: 3px 8px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
            filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='#22000000');
        }

        /*#tblTodo tr {*/
            /*background-color: window;*/
        /*}*/

        <!--
        -->

        .progressBar {
            height: 16px;
            font-size: 9pt;
        }

        <!--
        -->
        ul.menu {
            font-family: 'Segoe UI';
            font-size: 9pt;
            padding: 3px;
        }

        <!--
        -->
        #txtProgress {
            text-align: center;
        }

        <!--
        -->
        #vimBar {
            position: fixed;
            border-top: solid 1px gray;
            background-color: window;
            left: 0;
            height: 20px;
            width: 100%;
            bottom: 0;
            z-index: 999;
            display: none;
        }

        #txtVim {
            font-family: consolas;
            font-size: 11pt;
            line-height: 11pt;
            height: 14px;
            width: 100%;
            display: none;
        }

        #lblVim {
            font-family: consolas;
            font-size: 11pt;
            float: right;
            /*background-color: #ffe4c4;*/
            text-align: right;
            margin-right: 10px;
            display: none;
        }

    </style>

    <script src="script/lib/jquery.js"></script>
    <script src="script/pub/jsex.js"></script>
    <script src="script/pub/jqueryex.js"></script>
    <script src="script/pub/domex.js"></script>

    <script src="script/undecorated/core.js"></script>

    <script src="script/undecorated/colResizer.js"></script>
    <script src="script/undecorated/editable.js"></script>
    <script src="script/undecorated/popupMenu.js"></script>

    <script src="script/undecorated/dropdown.js"></script>
    <script src="script/undecorated/selectGrid.js"></script>
    <script src="script/undecorated/numberInput.js"></script>
    <script src="script/undecorated/repeatButton.js"></script>
    <script src="script/undecorated/timePicker.js"></script>
    <script src="script/undecorated/datetimePicker.js"></script>
    <script src="script/undecorated/datetimeInput.js"></script>

    <script src="script/undecorated/progressBar.js"></script>
    <script src="script/undecorated/toast.js"></script>

    <script src="script/host.js"></script>
    <script src="script/undoman.js"></script>
    <script src="script/vimcmd.js"></script>
    <script src="script/dnd.js"></script>
    <script src="script/clip.js"></script>
    <script src="script/todolist.js"></script>
    <script src="script/boxselector.js"></script>
    <script src="script/todo.js"></script>
    <script src="script/todo_api.js"></script>
    <script>

        window.ie8 = false;

        var debug = location.href.indexOf('debug') != -1;
        if (debug) {
            host.buildList = function () {
                return '';
            };
        }
        $(function () {

            if (debug) {
                var $btnTest = $('<input type="button" value="test"/>');
                $btnTest.appendTo($(document.body));
                $btnTest.on('click', test);
            }

//            spike();

            $('#txtDue').datetimeInput({
                picker: $('#divDatetimePicker'),
                precision: 'minute'
            });

//            setColumnVisible('due', true);
        });

        var tdueVisible = false;
        function test() {
            todo_setActiveTodo('fdsfds\nrew\nrewarew');
        }

        function spike() {
            //
            var $ulMenu1 = $('#ulMenu1');
            $ulMenu1.popupMenu();
            $(document).on('contextmenu', function (e) {
                $ulMenu1.popupMenu('showAt', e.pageX, e.pageY);
                e.preventDefault();
            });
        }


    </script>

</head>
<body>
<div id="bg2"></div>
<input type="text" style="position:absolute;border: solid 1px gray;" id="txtDue"
       class="hidden"/>
<input type="text" style="position:absolute;border: solid 1px gray;" id="txtProgress"
       class="hidden"/>

<table id="tblTodo" tabindex="0" class="tree">
    <thead>
    <tr>
        <th data-col1 data-width="0.5"><span>Title</span></th>
        <th data-progress="" data-width="73" style="padding-left:1px;padding-right: 1px;"><span>Progress</span></th>
        <th data-due data-width="129"><span>Due</span></th>
        <th data-desc data-width="0.5"><span>Description</span></th>
    </tr>
    </thead>
    <tbody class="nodes">
    <tr class="root node hidden" data-level="-1" data-expanded="1" style="display: none;">
        <td data-col1>
            <input type="checkbox"/><span
                class="markers"></span><span
                class="label editable">#ROOT#</span>
        </td>
        <td data-progress="" class="editable" tabindex="0">
            <div class="progressBar"></div>
        </td>
        <td data-due class="editable" tabindex="0"></td>
        <td data-desc class="editable" tabindex="0"></td>
    </tr>
    <script>
        document.write(host.buildList());
    </script>
    </tbody>
    <tfoot class="empty-indicator" style="display: none">
    <tr>
        <td colspan="4">
            <span>todo list is empty</span>
            (<a href="javascript:addTodo();">add</a>)
        </td>
    </tr>
    </tfoot>
    <tfoot style="display: none" id="node-template-container">
    <tr data-level="0"
        class="node leaf">
        <td data-col1>
            <div class="indent-wrapper">
                <div class="indent"><img src="image/line-udr.gif"/></div>
            </div>
            <div class="node-content cell-wrapper" style="padding-left:24px">
                <div class="node-button" style="margin-left:0px"></div>
                <input type="checkbox"/><span class="markers"></span><span
                    class="label editable" tabindex="0"></span></div>
        </td>
        <td data-progress class="editable" tabindex="0">
            <div class="progressBar">
                <div class="progressBarContents">
                    <div class="value base">0%</div>
                    <div class="progress" style="width:0%">
                        <div class="value contrast" style="width:0%;">0%</div>
                    </div>
                </div>
            </div>
        </td>
        <td data-due class="editable" tabindex="0"></td>
        <td data-desc class="editable" tabindex="0"></td>
    </tr>
    </tfoot>
</table>
<div id="divDatetimePicker" class="datetimePicker hidden">
    <div>
        <a href="#" class="pager prevYear">&lt;&lt;</a>
        <a href="#" class="pager prevMonth">&lt;</a>
        <input type="text" class="txtMonth"/><input
            type="text" class="txtYear"/>
        <a href="#" class="pager nextMonth">&gt;</a>
        <a href="#" class="pager nextYear">&gt;&gt;</a>
    </div>
    <table class="calendar">
        <thead>
        <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
        </thead>
        <tbody class="days">
        </tbody>
    </table>
    <div class="timePickerContainer">
        <span class="timeLabel">Time</span>

        <div class="timePicker"></div>
    </div>
    <div class="buttons">
        <input type="button" class="btnOk" value="OK">
        <input type="button" class="btnToday" value="Today">
        <input type="button" class="btnClear" value="Clear">
    </div>
</div>
<!--menu-->
<ul id="ulMenu1" class="hidden">
    <li id="mnActive" data-name="mnActive"><label>Active</label></li>
    <li>-</li>
    <li data-name="mnTag">
        <label>Tag</label>
        <!--populate at runtime?-->
        <ul id="tagMenu"></ul>
    </li>
    <li data-name="mnColor">
        <label>Color</label>
        <ul id="colorMenu"></ul>
    </li>
    <li data-name="mnPriority">
        <label>Priority</label>
        <ul id="priorityMenu"></ul>
    </li>
    <li>-</li>
    <li data-action="setupReminder" id="mnSetupReminder"
        data-name="mnSetupReminder"><label>Set Reminder…</label></li>
</ul>
<!--vim bar-->
<div id="vimBar">
    <input type="text" id="txtVim"/>
    <span id="lblVim"></span>
</div>
<!--toast-->
<div id="divToast">
    hello?
</div>
<div id="divFullWidth" style="height:1px;width:100%;"></div>
</body>
</html>